<style scoped>
</style>
<!-- 翻页组件 -->
<template>
  <!-- 分页 -->
  <div
    class="block"
    v-if="pagination.total>0"
  >
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :current-page.sync="pagination.page"
      :page-size="pagination.size"
      layout="prev, pager, next, jumper"
      :total="pagination.total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    total: {
      type: Number
    },
    loading: {
      type: Boolean,
      default: false
    },
    changePage: {
      type: Function
    },
    page: {
      type: Object
    }
  },
  data () {
    return {
      // 分页
      pagination: {
        // 当前页
        page: 1,
        // 一页大小
        size: 12,
        // 总数
        total: 0
      }
    }
  },
  watch: {
    total: {
      handler (newValue) {
        this.pagination.total = newValue
      },
      deep: true
    },
    page: {
      handler (newValue) {
        this.pagination = newValue
      },
      deep: true
    }
  },
  methods: {
    handleCurrentChange (val) {
      this.changePage(this.pagination)
    },
    currentPage (page) {
      this.pagination.page = page
    }
  }
}

</script>
